import React, { useEffect, useState } from 'react';
import Icon from '@/components/Icon';
import styled from '@emotion/styled';
import { Popover, Button } from 'antd';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import DeviceEnum from './DeviceEnum';
import { useTranslation } from 'react-i18next';

interface VideoToolProps {
	classname?: string;
	id?: string | number;
	tools?: ToolPrpos[];
	onclick?: (data: ToolPrpos) => void;
	removeBtn?: boolean;
	removeAgent?: () => void;
	showDeviceSelect?: boolean;
}

export interface ToolPrpos {
	id: number;
	icon: string;
	activeIcon?: string;
	text?: string;
	isActive: boolean;
	mode?: string;
}
const RemoveSpan = styled.span`
	font-size: 12px;
	font-weight: 400;
	color: #dae4f8;
	position: absolute;
	right: 8px;
	cursor: pointer;
`;

const VideoTool = (props: VideoToolProps) => {
	const { t } = useTranslation();
	const { classname = '', tools = [], onclick, removeBtn, removeAgent, id = '', showDeviceSelect = false } = props;
	const classnames = `${classname} widget-video-tool-container`;
	const [audioSelect, setAudioSelect] = useState<boolean>(false);
	const [videoSelect, setVideoSelect] = useState<boolean>(false);

	const getTips = (type: string, isActive: boolean): string => {
		let text = '';
		switch (type) {
			case 'icon-widget-shengyinkai':
				text = t('volume-on');
				break;
			case 'icon-widget-shengyinguan':
				text = t('volume-off');
				break;
			case 'icon-widget-a-bianzu19':
				text = t('switch-to-voice');
				break;
			case 'icon-widget-a-bianzu421':
				text = t('switch-to-video');
				break;
			case 'icon-widget-quanping3':
				text = t('maximize');
				break;
			case 'icon-widget-suoxiao':
				text = t('minimize');
				break;
			case 'icon-widget-shipinchuangkou-yuyinguan':
				text = t('microphone-off');
				break;
			case 'icon-widget-shipinchuangkou-yuyinkai':
				text = t('microphone-on');
				break;
			case 'icon-widget-huazhonghua':
				text = !isActive ? t('pip-on') : t('pip-off');
				break;
			case 'icon-widget-biaozhu':
				text = t('biaozhu');
				break;
			case 'icon-widget-a-jietu2':
				text = t('jietu');
				break;
			default:
				break;
		}
		return text;
	};

	return (
		<>
			<ul className={classnames}>
				{tools.map(item => (
					<li key={item.id} className="tool-li">
						<div className="icon-wrapper">
							<span className="icon-wrapper-item">
								<Icon
									styles={{ fontSize: 14 + 'px' }}
									classname={item.isActive ? item.activeIcon : item.icon}
									onClick={() => {
										onclick && onclick(item);
									}}
								></Icon>
								<span className="tips">{getTips((item.isActive ? item.activeIcon : item.icon) || '', item.isActive)}</span>
							</span>

							{item.mode === 'unmute' && showDeviceSelect ? (
								<Popover content={<DeviceEnum mode="audio" id={id} />} overlayClassName={'device-enum-popover'} color="#35363A" trigger="click">
									<CaretUpOutlined />
								</Popover>
							) : null}
							{item.mode === 'update' && showDeviceSelect ? (
								<Popover content={<DeviceEnum mode="video" id={id} />} overlayClassName={'device-enum-popover'} color="#35363A" trigger="click">
									<CaretUpOutlined />
								</Popover>
							) : null}
						</div>
					</li>
				))}
				{removeBtn ? <RemoveSpan onClick={removeAgent}>{t('remove')}</RemoveSpan> : undefined}
			</ul>
		</>
	);
};

export default VideoTool;
